<script>
import request from "../../../utils/request";
import { getShowImage, handleUrlParams } from "@/utils";
import arrayUtils from "../../../utils/arrayUtils";

export default {
  name: "topicClassList",
  methods: {
    getShowImage,
    async itemClick(item) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/chooseStructure/index", {
          classId: item.classId,
          className: item.className,
        }),
      });
    },
    //动态计算轮播图高度
    swiperHeight(count) {
      let localCount = count - 1;
      return 160 + localCount * 210;
    },
  },
  data() {
    return {
      list: null,
      currentSwiperIndex: 0,
    };
  },
  async created() {
    //获取考试分类列表
    let res = await request({
      url: "topicClass/page",
      data: {
        current: 1,
        size: -1,
      },
      errorHandle: true,
      showLoading: true,
    });
    this.list = arrayUtils.toTwoDimensionalArray(res.records, 5);
  },
};
</script>

<template>
  <view class="component">
    <swiper
      class="swiper"
      v-if="list"
      :indicator-dots="list.length > 1"
      @change="(event) => (currentSwiperIndex = event.detail.current)"
      :style="'height:' + swiperHeight(list[currentSwiperIndex].length) + 'rpx'"
    >
      <swiper-item class="swiper-item" v-for="(list2, index) in list" :key="index">
        <view class="list">
          <view class="item" v-for="item in list2" :key="item.classId" @click="itemClick(item)">
            <view class="left">
              <image :src="getShowImage(item.classIco)" class="icon" mode="aspectFill"></image>
            </view>
            <view class="right">
              <view class="title row">{{ item.className }}</view>
              <view class="note row">{{ item.classNotes }}</view>
              <view class="btn row">前往刷题</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
.component {
  .swiper {
    margin-top: 30rpx;
    transition: height 0.5s;
    .swiper-item {
      .list {
        .item {
          &:not(:first-child) {
            margin-top: 50rpx;
          }
          display: flex;
          align-items: center;
          .left {
            .icon {
              width: 117rpx;
              height: 153rpx;
              border-radius: 20rpx;
            }
          }
          .right {
            margin-left: 30rpx;
						width: 0;
						flex: 1;
            .row:not(:first-child) {
              margin-top: 10rpx;
            }
            .title {
              font-size: 32rpx;
            }
            .note {
              font-size: 28rpx;
              color: var(--text-color-light);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
            }
            .btn {
              background: var(--theme-color);
              padding: 0 20rpx;
              height: 60rpx;
              border-radius: 30rpx;
              font-size: 28rpx;
              display: flex;
              align-items: center;
              width: max-content;
							color: var(--text-color-white);
            }
          }
        }
      }
    }
  }
}
</style>
